import 'package:flutter/material.dart';
import 'package:flutter_base_widget/ratingBar/rating_bar_01.dart';
import 'package:flutter_base_widget/sheet/sgnature_painter_page.dart';
import 'package:flutter_base_widget/text/text_01.dart';
import 'package:flutter_base_widget/text/text_02.dart';
import 'package:flutter_base_widget/text/text_rich_page_01.dart';
import 'package:flutter_base_widget/textfield/text_field_01.dart';
import 'package:flutter_base_widget/textfield/text_field_02.dart';
import 'package:flutter_base_widget/transform/DragImgDemoPage.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'appbar/appbar_home_page.dart';
import 'autocomplete/autocompltet_01.dart';
import 'button/ButtonListPage.dart';
import 'button/ToggleButtonsPage.dart';
import 'canvas/example_801_baseUse.dart';
import 'canvas/example_802_baseUse.dart';
import 'canvas/sgnature_painter_page.dart';
import 'clip/clip_01.dart';
import 'clip/clip_03_input.dart';
import 'clip/clip_04_choice.dart';
import 'clip/clip_05_filter.dart';
import 'clip/clip_06_action.dart';
import 'clip/clip_warp_02.dart';
import 'filtered/BackdropFilterWidget.dart';
import 'filtered/ColorFilteredWidget.dart';
import 'filtered/ImageFilteredWidget.dart';
import 'gesture/RepaintBoundaryPage.dart';
import 'instrinsic/instrinsic_01.dart';
import 'instrinsic/instrinsic_02.dart';
import 'isolate/Isolate_base_use_page.dart';
import 'isolate/Isolate_handler_message_page.dart';
import 'nav/nav_01.dart';
import 'navigator/navigator_utils.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      locale: const Locale('zh'),
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        //此处
        Locale('zh', 'CH'),
        Locale('en', 'US'),
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ColorFiltered(
          colorFilter: ColorFilter.mode(
            Colors.grey,
            BlendMode.saturation,
          ),
          child: MyHomePage(title: 'Flutter Demo Home Page')),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Map<String, dynamic>> _list = [
    {
      "title": "AppBar",
      "childList": [
        {
          "title": "AppBar 的基本使用",
          "page": const AppBarHomePage(),
        }
      ],
    },
    {
      "title": "Button",
      "childList": [
        {
          "title": "ToggleButtons 按钮组",
          "page": const ToggleButtonsPage(),
        },
        {
          "title": "Flutter常用按钮 ",
          "page": const ButtonListPage(),
        },
      ],
    },
    {
      "title": "RatingBar",
      "childList": [
        {
          "title": "RatingBar  五角星评分组件的基本使用",
          "page": RatingBar01(),
        }
      ],
    },
    {
      "title": "文本显示",
      "childList": [
        {
          "title": "Text 的基本使用",
          "page": TextPage01(),
        },
        {
          "title": "TextRich 的基本使用",
          "page": TextRichPage01(),
        },
        {
          "title": "Autocomplete 自动补全数据",
          "page": Autocompltet01(),
        },
        {
          "title": "SelectionArea 多选选择",
          "page": SelectionAreaPage01(),
        },
      ],
    },
    {
      "title": "文本输入",
      "childList": [
        {
          "title": "TextField 实现银行卡输入 自动分割数字显示 ",
          "page": TextFieldPage01(),
        },
        {
          "title": "TextField 实现选中 复制 清除功能",
          "page": TextFieldPage02(),
        },
        {
          "title": "Autocomplete 自动补全数据",
          "page": Autocompltet01(),
        }
      ],
    },
    {
      "title": "页面底部导航栏",
      "childList": [
        {
          "title": "NavigationBar 实现的底部导航栏效果 ",
          "page": NavaHomePage1(),
        },
      ],
    },
    {
      "title": "Transform 变换",
      "childList": [
        {
          "title": "图片的拖动、旋转、缩放",
          "page": DragImgDemoPage(),
        },
        {
          "title": "ColorFiltered 实现图像过滤效果 ",
          "page": const ImageFilteredPage(),
        },
        {
          "title": "ColorFiltered 实现背景模糊效果",
          "page": const BackdropFilterPage(),
        },
      ]
    },
    {
      "title": "图片过滤",
      "childList": [
        {
          "title": "ColorFiltered 实现颜色过滤效果 ",
          "page": const ColorFilteredPage(),
        },
        {
          "title": "ColorFiltered 实现图像过滤效果 ",
          "page": const ImageFilteredPage(),
        },
        {
          "title": "ColorFiltered 实现背景模糊效果",
          "page": const BackdropFilterPage(),
        },
      ]
    },
    {
      "title": "Chip 标签",
      "childList": [
        {
          "title": "Chip 的基本使用 ",
          "page": ClipHome(),
        },
        {
          "title": "Chip 结合 Wrap 的基本使用 ",
          "page": ClipWrapHome(),
        },
        {
          "title": "InputChip 的基本使用 ",
          "page": InputChipHome(),
        },
        {
          "title": "ChoiceChip 的基本使用 ",
          "page": ChoiceClipHome(),
        },
        {
          "title": "FilterChip 的基本使用 ",
          "page": CastFiltePage(),
        },
        {
          "title": "ActionChip 的基本使用 ",
          "page": ActionClipPage(),
        },
      ],
    },
    {
      "title": "ListView",
      "childList": [
        {
          "title": "Flutter IntrinsicHeight 自适应高度",
          "page": const InstrinsicPage01(),
        },
        {
          "title": "Flutter 巧妙的实现一个时间轴效果 IntrinsicHeight 组件的应用",
          "page": InstrinsicPage02(),
        }
      ],
    },
    {
      "title": "手势识别",
      "childList": [
        {
          "title": "Flutter RawMagnifier 实现放大镜的效果",
          "page":  RawMagnifierPage(),
        },

      ],
    },

    {
      "title": "绘图专题",
      "childList": [
        {
          "title": "绘图基本使用1",
          "page": const Example801(),
        },
        {
          "title": "绘图基本使用 2",
          "page": Example802(),
        },
        {
          "title": "绘图 签名",
          "page": const SignaturePainterPage(),
        },
      ],
    },
    {
      "title": "弹框",
      "childList": [
        {
          "title": "底部弹框",
          "page": const BottomSheetPage(),
        },

      ],
    },

    {
      "title": "异步编程专题",
      "childList": [
        {
          "title": "Isolate 异步处理耗时任务",
          "page": const IsolateBaseUsePage(),
        },
        {
          "title": "Isolate 消息通信机制",
          "page": const IsolateHandlerMessagePage(),
        }
      ],
    },
  ];

  @override
  Widget build(BuildContext context) {
    //脚手架
    return Scaffold(
      appBar: AppBar(
        title: const Text("目录"),
      ),
      body: ListView.builder(
        //数量
        itemCount: _list.length,
        itemBuilder: (BuildContext context, int index) {
          //子Item
          return buildItemWidget(index);
        },
      ),
    );
  }

  ///子Item
  Widget buildItemWidget(int index) {
    //包裹子Widget
    return IntrinsicHeight(
      //左右水平排开
      child: Row(
        //顶部对齐
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //左侧的时间线
          buildLeftWidget(index),
          //右侧的文本
          Expanded(
            child: buildRigetWidget(index),
          ),
        ],
      ),
    );
  }

  ///左侧的时间线
  buildLeftWidget(int index) {
    Map<String, dynamic> item = _list[index];
    return Container(
      width: 100,
      child: Column(
        children: [
          Container(
            width: index == 0 ? 0 : 2,
            height: 10,
            color: Colors.blue,
          ),
          ClipRRect(
            borderRadius: BorderRadius.all(
              Radius.circular(8),
            ),
            child: Container(
              padding: EdgeInsets.only(left: 4, right: 4, top: 1, bottom: 1),
              child: Text(
                item["title"] ?? "",
                style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
              color: Colors.blue,
            ),
          ),
          Expanded(
            child: Container(
              width: index == _list.length - 1 ? 0 : 2,
              color: Colors.blue,
            ),
          )
        ],
      ),
    );
  }

  buildRigetWidget(int index) {
    Map<String, dynamic> item = _list[index];
    List childList = item["childList"] ?? [];
    return Container(
      margin: EdgeInsets.only(top: 12),
      padding: EdgeInsets.only(left: 10, right: 14, bottom: 22, top: 4),
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: const BorderRadius.all(
          Radius.circular(8),
        ),
      ),
      child: Column(
        children: childList
            .asMap()
            .keys
            .map(
              (index) => GestureDetector(
                onTap: () {
                  NavigatorUtils.pushPageByFade(
                      context: context, targPage: childList[index]["page"]);
                },
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                          child: Text(
                        childList[index]["title"],
                        style: TextStyle(color: Colors.blue),
                      )),
                      Icon(Icons.arrow_forward_ios)
                    ],
                  ),
                ),
              ),
            )
            .toList(),
      ),
    );
  }
}
